OBJECT:
Image
new
Image([width,] [height])
The Image object is an image on an HTML form, created by using
the HTML 'IMG' tag. Any images created in a document are then stored
in an array in the document.images property, and it is from here
that they are accessed. If you have specified a name for an image created
using the HTML 'IMG' tag, you can use that name when you index the image
in the images array. You can also use the Image constructor
and the new operator to create an image object which can then
be displayed within an existing cell. The main use of this is to load
an image from the network so that it is in cache before it needs to
be displayed.
For example the following code creates an Image object called
MyImage:
Code:
myImage = new Image()
myImage.src = "C:/Personal/Mountain.gif"
...you could then have this image replace an existing image River
on, say, the click of a button:
Code:
onClick="javascript:void(document.River.src = myImage.src)"
When one Image object replaces another, as in the above example,
it cannot change the width and height properties of it
(these are read-only for this object) and the browser displays the image
with the dimensions set in the IMG tag. JavaScript can also be used
to create animation by repeatedly changing the value of the src
property. This isn't as fast as GIF animation because Javascript has
to load each indivual frame as a separate file, whereas with GIF animation
all the frames are contained in one file.
PROPERTIES
border Property
The border property is read-only, and is a string stating the
width of the border of an image in pixels. For an image created using
the Image constructor, this is 0.
Syntax: Image.border
complete Property
The complete property is read-only and returns a Boolean value
indicating whether or not the browser has completed loading the image.
Syntax: Image.complete
height Property
The height property is read-only, and is a string stating the
HEIGHT attribute of an IMG tag in pixels. Where an image has been created
using the Image constructor, the height is of the image itself,
not the HEIGHT value of the display.
Syntax: Image.height
hspace Property
The hspace property is read-only and specifies the HSPACE value
of the IMG tag, which is the number of pixels space between the left
and right margins of an image and surrounding text. For an image created
using the Image constructor, the value of this property is null.
Syntax: Image.hspace
lowsrc Property
The lowsrc property specifies the URL of a low-resolution version
of an image relating to the LOWSRC attribute of an IMG tag. A browser
first loads a low-resolution version before replacing it with the high-resolution
version of the src property.
Syntax: Image.lowsrc
name Property
The name property is read-only and reflects the NAME attribute
of an IMG tag. If the Image object has been created by using
the Image constructor, the value of this property is null.
Syntax: Image.name
src Property
The src property is a string representing the URL of an image
and reflects the SRC attribute of an IMG tag. The src property
can be altered at any time, but when you do so the new image (if not
the same size) is scaled to fit the height and width attributes of the
IMG tag. Also, the loading of any other image into that cell is aborted,
so the Lowsrc property should be altered before setting the src
property.
Syntax: Image.src
vspace Property
The vspace property is read-only and specifies the VSPACE value
of the IMG tag, which is the number of pixels space between the top
and bottom margins of an image and surrounding text. For an image created
using the Image constructor, the value of this property is null.
Syntax: Image.vspace
width Property
The width property is read-only, and is a string stating the
WIDTH attribute of an IMG tag in pixels. Where an image has been created
using the Image constructor, the width is of the image itself,
not the WIDTH value of the display.
Syntax: Image.width
METHODS
handleEvent Method
The handleEvent method is used to evoke the handler for a specified
event.
Syntax: Image.handleEvent(event)
EVENT HANDLERS
All the event handlers that are available with the Image object
also have an equivalent property (spelled entirely in lower case letters)
which can be used to set an image's event-handlers when created using
the Image constructor. Assume you have a function called MyFunction
which you want to set to the onload event-handler for an image
called Ocean, you could accomplish this with the following statement:
Code:
Ocean.onload = myFunction
The same applies for all the following event-handlers.
onAbort EventHandler
The onAbort event handler is used to execute certain JavaScript
code whenever an abort event occurs, such as when the user stops the
loading of an image by clicking a link or a Stop button.
Syntax: onAbort
= "myJavaScriptCode"
onError EventHandler
The onError event handler executes certain Javascript code whenever
a Javascript syntax or runtime error occurs during the loading of a
document or image.
Syntax: onError = "myJavaScriptCode"
onKeyDown EventHandler
The onKeyDown event handler is used to execute certain JavaScript
code whenever the user depresses a key.
Syntax: onKeyDown = "myJavaScriptCode"
onKeyPress EventHandler
The onKeyPress event handler executes JavaScript code whenever
the user presses or holds down a key
Syntax: onKeyPress = "myJavaScriptCode"
onKeyUp EventHandler
The onKeyUp event handler executes JavaScript code whenever the
user releases a depressed key.
Syntax: onKeyUp = "myJavaScriptCode"
onload EventHandler
The onload event handler is used to execute JavaScript code whenever
the browser has finished loading a window or all of the frames within
a FRAMESET tag.
Syntax: onload ="myJavaScriptCode"
NOTE:
The event handlers onClick,
onMouseOut and onMouseOver
can also be used with the Internet Explorer browser, but not with Netscape.
You can, however, use these event handlers in conjunction with the Image
object with Netscape, if you define an Area object for the image,
or if the IMG tag is placed within a Link object.
|